<template>
  <div class="app-container">
    <el-form ref="ruleForm" :inline="true" label-position="left" :model="ruleForm" :rules="rules" class="demo-ruleForm">
     <el-form-item label="派车单类型" >
            <el-select v-model="ruleForm.region" placeholder="请选择">
              <el-option label="提货" value="TRANSPORT" />
              <el-option label="干线" value="TRUNK" />
              <el-option label="送货" value="DELIVERY" />

            </el-select>    </el-form-item>
      <el-form-item label="计划到仓时间">
        <el-input v-model="ruleForm.user" placeholder="审批人" />
      </el-form-item>
      <el-form-item label="计划完成时间">
        <el-input v-model="ruleForm.user" placeholder="审批人" />
      </el-form-item>
      <el-divider />
      <el-form-item label="车牌号">
        <el-input v-model="ruleForm.user" placeholder="审批人" />
      </el-form-item>
      <el-form-item label="司机姓名">
        <el-input v-model="ruleForm.user" placeholder="审批人" />
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="ruleForm.user" placeholder="审批人" />
      </el-form-item>

      <el-divider />
      <el-row style="padding-bottom:20px;">目的地信息</el-row>
      <el-form-item label="交接地址">
        <el-input v-model="ruleForm.user" placeholder="审批人" />
      </el-form-item>
      <el-form-item label="交接人姓名">
        <el-input v-model="ruleForm.user" placeholder="审批人" />
      </el-form-item>
      <el-form-item label="交接人电话">
        <el-input v-model="ruleForm.user" placeholder="审批人" />
      </el-form-item>

      <el-divider style="margin-top:0" />

      <el-form-item label="备注" prop="desc">
        <el-input v-model="ruleForm.desc" type="textarea" style="width: 500px;" />
      </el-form-item>

    </el-form>
    <el-row style="margin-bottom:20px"> <el-button type="success">小程序订单</el-button></el-row>

    <el-form ref="ruleForm" label-position="left" :model="ruleForm" :rules="rules" class="demo-ruleForm">
      <el-row :gutter="20" type="flex" justify="space-between">

        <el-col :span="20">  <el-form-item label="模糊搜索" prop="name" label-width="80px">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="下单时间" prop="region">
            <el-date-picker
              v-model="ruleForm.date1"
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="20">
            <el-form-item label="状态" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择">
              <el-option label="提货司机待接受" value="PICKUP_DRIVER_NOACCEPTED" />
              <el-option label="提货司机执行中" value="PICKUP_DRIVER_RUNNING" />
              <el-option label="提货司机已完成" value="PICKUP_DRIVER_COMPLETED" />
              <el-option label="干线司机待接受" value="BRANCH_DRIVER_NOACCEPTED" />
              <el-option label="干线司机执行中" value="BRANCH_DRIVER_RUNNING" />
              <el-option label="干线司机已完成" value="PBRANCH_DRIVER_COMPLETED" />
              <el-option label="送货司机待接受" value="DELIVERY_DRIVER_NOACCEPTED" />
              <el-option label="送货司机执行中" value="DELIVERY_DRIVER_RUNNING" />
              <el-option label="送货司机已完成" value="DELIVERY_DRIVER_COMPLETED" />
            </el-select>
          </el-form-item>
        </el-col>
        
      </el-row>

      <el-row type="flex" justify="space-between">

        <el-col>

          <el-form-item label-width="90px" label="寄件城市" prop="region" style="float:left;margin-right:20px">
            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label-width="90px" label="收件城市" prop="region" style="float:left;margin-right:50px">
            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-col>

      </el-row>
    </el-form>
    <div class="grey-bg">关联订单</div>
    <!--列表-->
    <el-table
      height="400px"
      :data="tableData"
      :header-cell-style="headStyle"
    >
      <el-table-column
        type="selection"
        width="50"
        align="center"
      />
      <el-table-column
        prop="orderNo"
        label="订单编号"
        align="center"
      />
      <el-table-column
        prop="fromCity"
        label="寄件城市"
        align="center"
      />
      <el-table-column
        prop="toCity"
        label="收件城市"
        align="center"
      />
      <el-table-column
        prop="transportName"
        label="寄件人姓名"
        width="150"
        align="center"
      />
      <el-table-column
        prop="deliveryName"
        label="收件人姓名"
        width="150"
        align="center"
      />
      <el-table-column
        label="货品信息"
      >
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        width="80"
      >   
        <template slot-scope="scope">
          <span v-if="scope.row.status==='PICKUP_DRIVER_NOACCEPTED'"> 提货司机待接受</span>
          <span v-if="scope.row.status==='PICKUP_DRIVER_RUNNING'"> 提货司机执行中</span>
          <span v-if="scope.row.status==='PICKUP_DRIVER_COMPLETED'"> 提货司机已完成</span>

          <span v-if="scope.row.status==='BRANCH_DRIVER_NOACCEPTED'">干线司机待接受</span>
          <span v-if="scope.row.status==='BRANCH_DRIVER_RUNNING'"> 干线司机执行中</span>
          <span v-if="scope.row.status==='PBRANCH_DRIVER_COMPLETED'">干线司机已完成</span>

          <span v-if="scope.row.status==='DELIVERY_DRIVER_NOACCEPTED'">送货司机待接受</span>
          <span v-if="scope.row.status==='DELIVERY_DRIVER_RUNNING'">送货司机执行中</span>
          <span v-if="scope.row.status==='DELIVERY_DRIVER_COMPLETED'">送货司机已完成</span>
        </template>

      </el-table-column>
      <el-table-column
        prop="orderTime"
        label="下单时间"
        align="center"
      />
      <el-table-column
        prop="payAmount"
        label="运费总价"
        align="center"
      />
      <el-table-column
        prop="sendWay"
        label="派单方式"
        align="center"
        width="250"
      >
        <template slot-scope="scope">
          <el-tag>标签一</el-tag>
        </template>
      </el-table-column>
      
    </el-table>
    <!--工具条-->
    <el-row :span="24">
      <el-pagination
        style="text-align:center"
        background
        :current-page="currentPage"
        :pager-count="5"
        :page-sizes="[5, 10]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      headStyle: {
        background: '#E5E8EF',
        color: '#373A49'
      },
      addFormVisible: false, // 新增
      currentPage: 1,
      total: 0,
      query: {
        name: '',
        userName: '',
        pageNumber: 1, // 当前请求的是第几页数据
        pageSize: 10
      },
      tableData: [
       
      ],
      rules: {

      }
    }
  },
    mounted() {
    this.tableList()
   // this.getCitys()
  },
  methods: {
        tableList() {
      const parm = {
       status:"PICKUP_DRIVER_WAITPICKUP"
      }
      this.$api.ordersList(parm).then(response => {
        this.tableData = response.data
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    add() {
      this.$router.push('./addOrder')
    },
    // 新增
    handleAdd() {
      this.addFormVisible = true
    },
    addSubmit() {},
    onSubmit() {
      this.$message('submit!')
    },
    // 新增
      tableList() {
      const parm = {
        pageNumber: this.query.pageNumber,
        pageSize: this.query.pageSize
      }
      this.$api.ordersList(parm).then(response => {
        this.tableData = response.data
      })
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>

.grey-bg{background: #dddddd; padding: 10px; margin-bottom: 10px;}
</style>

